<template>
  <el-dialog :title="`${isEdit ? '编辑' : '新增'}工种`" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <el-form-item label="工种编码" prop="workCode">
          <el-input v-model="formData.workCode" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="工种名称" prop="workName">
          <el-input v-model="formData.workName" maxlength="20" show-word-limit></el-input>
          <!-- <el-select v-model="formData.workName" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.workComment" type="textarea" maxlength="200" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        // options: [
        //   { label: '钻工', value: '钻工' },
        //   { label: '公司领导', value: '公司领导' },
        //   { label: '空压机工', value: '空压机工' },
        //   { label: '扒装工', value: '扒装工' },
        //   { label: '排险工', value: '排险工' },
        //   { label: '零杂工', value: '零杂工' },
        //   { label: '提升机工', value: '提升机工' },
        //   { label: '碎石工', value: '碎石工' },
        //   { label: '充填工', value: '充填工' },
        //   { label: '木工', value: '木工' },
        //   { label: '电机车维修工', value: '电机车维修工' },
        //   { label: '卸载工', value: '卸载工' },
        //   { label: '安全员', value: '安全员' },
        //   { label: '铲运机工', value: '铲运机工' },
        //   { label: '装载工', value: '装载工' },
        //   { label: '电机车工', value: '电机车工' },
        //   { label: '信号工', value: '信号工' },
        //   { label: '维修工', value: '维修工' },
        //   { label: '拥罐工', value: '拥罐工' },
        //   { label: '皮带工', value: '皮带工' },
        //   { label: '水泵工', value: '水泵工' },
        //   { label: '铲运维修工', value: '铲运维修工' },
        //   { label: '技术员', value: '技术员' },
        //   { label: '电工', value: '电工' },
        //   { label: '调度员', value: '调度员' },
        //   { label: '钻机队长', value: '钻机队长' },
        //   { label: '其他', value: '其他' },
        //   { label: '测试', value: '测试' }
        // ],
        formRules: {
          workCode: [
            { required: true, message: '请输入工种编码', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '部门编码不能为空' },
                { rule: 'isNumberLetter', msg: '工种编码只能输入数字和字母' },
                { rule: 'isRepeat', msg: { value: '工种编码重复', url: '/Work/Exists', key: 'workCode' } }
              ]), trigger: 'blur'
            }
          ],
          workName: [
            { required: true, message: '请输入工种名称', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isRepeat', msg: { value: '工种名称重复', url: '/Work/Exists', key: 'workName' } }
              ]), trigger: 'blur'
            }
          ]
        },
        apiKey: {
          search: '/Work/',
          add: '/Work',
          put: '/Work/'
        }
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) { return }
        this.$refs.RefForm.clearValidate()
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          workCode: '',
          workName: '',
          workType: '',
          workComment: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
